<!DOCTYPE html>
<html lang=zh-CN>
<head>
    <title id="live_title"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="monicaqin">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" type="text/css" href="css/root.css"/>
    <link rel="stylesheet" type="text/css" href="css/account/user.css"/>
    <link rel="stylesheet" type="text/css" href="css/address/address.css"/>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
    <link rel="stylesheet" type="text/css" href="css/play_ios.css"/>

    <script type="text/javascript" src="js/base/jquery-3.1.1.min.js?ver=2.0.4" charset="utf-8"></script>
    <script type="text/javascript" src="js/base/underscore-min.js"></script>
    <script type="text/javascript" src="js/base/moment.min.js"></script>
    <script src="js/base/api.js"></script>
    <script src="js/base/magiclamp.js"></script>
    <script src="js/base/base.js"></script>
    <script src="js/base/vue-filter.js"></script>
    <script src="js/base/vue.js"></script>
    <script src="js/base/swipe.min.js"></script>
    <script src="js/base/phone.js"></script>
    <script src="js/iconfont.js"></script>
    <script src="js/play_android.js"></script>
    <script src="js/lib/iphone-inline-video.min.js"></script>

    <script src="js/lib/clipboard.min.js"></script>
    <script>

    </script>

</head>
<body>

<!--<div @click="testPlay">-->
<!--<video id="test_video" src="http://wqs.jd.com/promote/superfestival/superfestival.mp4" preload="auto" playsinline-->
<!--x-webkit-airplay="true" webkit-playsinline="true"-->
<!--x5-video-player-type="h5" x5-video-player-fullscreen="true" autoplay></video>-->
<!--<input id="live_id" style="width: 10px;height: 10px;"/>-->
<!--</div>-->
<div id="play_background" style="position:absolute;top: 0px;bottom: 0px;left: 0;right: 0;">
    <div id="play_page">
        <div class="com-tag2" id="order-tab">
            <a href="javascript:void(0)" onclick="go_home()"  style="width: 2rem;padding-left: 0.5rem"><img class="footer-img1" src="img/home.png"></a>
            <a href="javascript:swip(0)" class="tag-on2 "><span>直播</span></a>
            <a href="javascript:swip(1)"><span>商品</span></a>
            <a href="javascript:swip(2)"><span>购物车</span></a>
            <a href="javascript:swip(3)"><span>订单</span></a>
            <!--<a href="javascript:void(0);" id="c_btn" data-clipboard-action="copy"  style="background:#FF1493;"-->
            <!--data-clipboard-target="#live_id"><span style="color:white;">APP</span></a>-->
        </div>
        <div id='slider' class='swipe play'>
            <div class='swipe-wrap'>
                <!--直播-->
                <div class="page-container">
                    <div class="play_video pro-img-container" @click="testPlay">
                        <video id="test_video" class="pro-video"  x-webkit-airplay="true" preload="auto" playsinline >



                            <!--<source class="pro-img height"-->
                                    <!--v-if="show_img&&prgoram.live_status!=7&&prgoram.image__fileurl"-->
                                    <!--:src="baseConfig.qn_host + prgoram.image__fileurl+'?imageView2/1/w/375/h/280'">-->
                            <!--<div class="pro-none-img height" v-if="show_img">-->
                            <!--<img class="" v-if="show_img&&prgoram.live_status!=7&&!prgoram.image__fileurl"-->
                            <!--src="./img/pro-none.png">-->
                            <!--</div>-->
                        </video>
                        <svg class="pro-play" v-if="show_img&&prgoram.live_status==7">
                            <use xlink:href="#icon-play"></use>
                        </svg>
                    </div>
                    &nbsp;
                </div>
                <!--商品-->
                <div class="page-container">
                    <div class="cart-list" v-for="goods in goods_list" @click="go_goods_detail(goods.id)">
                        <img class="goods-img"
                             :src="baseConfig.qn_host + goods.small_image__fileurl+'?imageView2/1/w/80/h/80'">
                        <div class="goods-main">
                            <div class="name">{{goods.name}}</div>
                            <div class=" margin-bottom"></div>
                            <div class="goods-id">商品id:{{goods.id}}</div>
                            <div class="bottom">
                                <div class="price">{{price_filter(goods.price)}}</div>
                                <div class="goods-num">已售{{goods.sale_num}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--购物车-->
                <div class="page-container">
                    <br>
                    <br>
                    <div class="cart-list" v-for="c_goods in cart_list"  v-if="c_goods.is_active">
                        <input type="checkbox" class="goods-radio" name="goods" :value="c_goods.goods_id"
                               v-model="goods_ids">
                        <img class="goods-img"  @click="go_goods_detail(c_goods.goods_id)"
                             :src="baseConfig.qn_host + c_goods.goods__small_image__fileurl+'?imageView2/1/w/80/h/80'">
                        <div class="goods-main" @click="delete_cart(c_goods)">
                            <div class="name">{{c_goods.goods__name}}</div>
                            <div class=" margin-bottom"></div>
                            <div class="goods-id">商品id:{{c_goods.goods_id}}</div>
                            <div class="bottom">
                                <div class="price">{{price_filter(c_goods.goods__price)}}</div>
                                <div class="num">
                                    <div class="btn-num jian" @click.stop="pop_num(c_goods)">-</div>
                                    <div class="input-num">{{c_goods.num}}</div>
                                    <div class="btn-num jia" @click.stop="add_num(c_goods)">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-top">
                        <div class="cart-main">
                            <label><input class="android-goods-radio" checked name="cart_goods" type="checkbox"
                                          @click="checkAll">全选</label>
                            <div class="font-red">{{price_filter(price_all(goods_ids))}}</div>
                        </div>
                        <button class="cart-pay" @click="cart_pay(goods_ids)">结算</button>
                    </div>
                </div>
                <!--订单-->
                <div class="page-container">
                    <div class="finished-order">
                        <div class="order-item g-wrap" v-for="order in goods_order_list">
                            <div class="my-order-title line">
                                <div v-text="'订单号:'+order.id"></div>
                                <div class="red-font">
                                    <span class="price" v-if="order.goods_status==0">未发货</span>
                                    <span class="price" v-if="order.goods_status==1">正在发货</span>
                                    <span class="price" v-if="order.goods_status==2">已发货</span>
                                    <span class="price" v-if="order.goods_status==3">已收货</span>
                                    <span class="price" v-if="order.goods_status==4">已完成</span>
                                </div>
                            </div>
                            <div class="line" v-for="goods in order.goods_order_item_list">
                                <div class="g-item" @click="open_order_info(order.id)">
                                    <div class="g-item-wrap">
                                        <a href="#" class="g-img">
                                            <img :src="baseConfig.qn_host + goods.goods__small_image__fileurl+'?imageView2/1/w/80/h/80'">
                                        </a>
                                        <div class="g-i-info">
                                            <p class="g-i-name order-goods-title" v-text="goods.goods__name"></p>
                                            <p class="order-goods-mark margin-bottom" v-if="goods.goods__gg">
                                                {{goods.goods__gg}}</p>
                                            <p class="order-goods-mark" v-if="goods.bz" v-text="'备注:'+goods.bz"></p>
                                            <p class="order-goods-mark">商品ID:{{goods.goods_id}}</p>
                                            <p class="order-count">
                                                <span class="order-goods-price"
                                                      v-text="price_filter(goods.price)"></span>
                                                <span class="order-goods-num">数量{{goods.num}}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="my-order-title">
                                <div>共{{order.goods_num}}件商品</div>
                                <div class="red-font">合计:<span class="price" v-text="price_filter(order.price)"></span>
                                </div>
                            </div>
                            <div class="order-info dn-info" v-if="order.goods_status==2&&order.dispute_step==0">
                                <div class="order-btn">
                                    <button class="red-button" type="button" v-if="order.dispute_step==0"
                                            @click="make_goods_order(order)">
                                        确认收货{{shengyudays(order)}}
                                    </button>
                                    <button class="yellow-button" type="button" v-if="order.dispute_step==0"
                                            @click="dispute_goods_order(order)">投诉
                                    </button>
                                </div>

                            </div>
                            <div class="order-info dn-info" v-if="order.goods_status==3&&order.dispute_step==0">
                                <div class="order-btn">
                                    <button class="red-button" type="button" v-if="order.dispute_step==0"
                                            @click="make_goods_order(order)">
                                        完成订单
                                    </button>
                                    <button class="yellow-button" type="button" v-if="order.dispute_step==0"
                                            @click="dispute_goods_order(order)">投诉
                                    </button>
                                </div>

                            </div>
                            <div class="order-info dn-info" v-if="order.dispute_step!=0&&order.dispute_step!=3">
                                <div class="order-btn">
                                    <button class="red-button" type="button">
                                        未确认收货，已投诉
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>

<script type="text/javascript">
//    html.resize
    test_video.style.width = screen.width + "px";
    test_video.style.height = screen.height + "px";
    //    c.style.width = screen.width + "px";
    //    c.style.height = screen.height + "px";
    //    goods.style.width = screen.width + "px";
    //    goods.style.height = screen.height + "px";
</script>


<script type="text/javascript">


    function init_video(obj) {
        var config = JSON.parse(obj.current_config__data_json);
        test_video.setAttribute("x5-video-player-type", "h5");
        test_video.setAttribute("src", config.hls_play_url);
        if(obj.live_status==7){
            test_video.setAttribute("poster", config.jpg+"?t="+new Date());
        }else{
            if(obj.image__fileurl){
                //
                test_video.setAttribute("poster", baseConfig.qn_host + obj.image__fileurl+'?imageView2/1/w/375/h/280');
            }else{
                test_video.setAttribute("poster", "./img/pro-none.png");
            }

        }
    }

    function testPlay() {


    }


    function portrait() {
        test_video.setAttribute("x5-video-orientation", "portrait");
    }

    function landscape() {
        test_video.setAttribute("x5-video-orientation", "landscape");
    }

    function autoOrientation() {
        test_video.setAttribute("x5-video-orientation", "landscape|portrait")
    }


    setTimeout(function () {
        var elem = document.getElementById('slider');

//        var $tags = ;
        window.mySwipe = new Swipe(elem, {
            continuous: false,
            disableScroll: false,
            stopPropagation: false,
            callback: function (index) {
                $('#order-tab').find('a').eq(index+1).addClass('tag-on2')
                    .siblings('a').removeClass('tag-on2');
                var play_background = document.getElementById("play_background");
                if (index == 0) {

                    play_background.style.backgroundColor = null;
                } else {
                    play_background.style.backgroundColor = '#f5f5f5';
                }
            },
            transitionEnd: function (index, elem) {
            }
        });

        window.swip = function (index) {
            mySwipe.slide(index);
            //e.preventDefault();
        }

        var page = GetQueryString('show');
        if(page=='goods'){
            window.swip(1);
        }
    }, 1000);


    window.onresize = function () {
        //alert("haha");
//        test_video.style.width = screen.width;
//        test_video.style.height = screen.height;
    }

    //    test_video.addEventListener("timeupdate", function () {
    //        if (test_video.currentTime > 2) {
    //            test_video.style.display = 'block';
    //        }
    //    });

    var clipboard = new Clipboard('#c_btn');

    clipboard.on('success', function (e) {
        window.location.href = baseConfig.app_download_url;
        console.log(e);
    });

    clipboard.on('error', function (e) {

        console.log(e);
    });
    //    var test_video = document.getElementById('test_video');
    //    try {
    //        window.test_video.play();
    //    } catch (e) {
    //        alert(e);
    //    }

    function debugEvents(video) {
        [
            'loadstart',
            'progress',
            'suspend',
            'abort',
            'error',
            'emptied',
            'stalled',
            'loadedmetadata',
            'loadeddata',
            'canplay',
            'canplaythrough',
            'playing', // fake event
            'waiting',
            'seeking',
            'seeked',
            'ended',
            // 'durationchange',
            'timeupdate',
            'play', // fake event
            'pause', // fake event
            // 'ratechange',
            // 'resize',
            // 'volumechange',
            'webkitbeginfullscreen',
            'webkitendfullscreen',
        ].forEach(function (event) {
            video.addEventListener(event, function () {
                console.info('@', event);
            });
        });
    }

    var videos = document.querySelectorAll('video');
    for (var i = 0; i < videos.length; i++) {
        window.enableInlineVideo(videos[i], {everywhere: true});
//        enableButtons(videos[i]);
        debugEvents(videos[i]);
    }
</script>
</body>
</html>